<template>
  <div id="a">
    <div class="b">
      <div class="bb">
        <img class="c" :src="img1" alt="" />
        <span class="d">{{ $route.meta.title }}</span>
        <div class="dd"></div>
      </div>
    </div>
    <div class="address">
      <p class="name">王耀<span class="phone">188****8888</span></p>
      <p class="ress">
        济南市历下区工业南路山钢新天地广场9号楼中公教育13楼货梯架
      </p>
    </div>
    <div class="shop">
      <div class="tit">
        <van-radio-group>
          <p>
            <van-icon name="shopping-cart-o" color="red" size="20" />
            <span class="s_title">品牌精选</span
            ><span class="t-tit">已免运费</span><span class="q-tit">领券</span>
          </p>
        </van-radio-group>
      </div>
      <div class="card">
        <van-card
          v-for="item in cartList"
          :key="item.id"
          :num='item.num'
          :price="item.price"
          :title="item.goodsname"
          :thumb="item.img"
        >
          <template #tags>
            <van-tag plain type="danger">七天无理由退货</van-tag>
            <van-tag plain type="danger">特价</van-tag>
          </template>
        </van-card>
      </div>
       <div class="tlist">
        <van-cell title="发票类型" is-link value="不开发票" />
        <van-cell title="售后免邮" value="部分商家赠送" />
        <van-cell
          title="买家留言"
          value="填写内容需要与商家协商并确认，45字以内"
          value-class="value"
        />
      </div>
    </div>
    <div class="bottom">
      <van-submit-bar
      :price="sumprice"
        button-text="提交订单"
      />
    </div>
  </div>
</template>

<script>
import { cartList } from "../util/request/api";
export default {
  data() {
    return {
      img1: require("../assets/images/white.png"),
      cartList: [],
    };
  },
  mounted() {
    cartList({
      uid: JSON.parse(sessionStorage.getItem("isLogin")).uid,
    }).then((res) => {
      if (res.data.code == 200) {
        this.cartList = res.data.list;
      }
    });
  },
  computed:{
    sumprice: function () {
      let sum = 0;
      this.cartList.forEach((item) => {
        sum = item.price*item.num;
         console.log(sum);
      });  
      return sum * 100;
    },
  },
};
</script>

<style  scoped>
.c {
  position: relative;
  top: 0.03rem;
}
.address {
  background: skyblue;
  border-radius: 3%;
  width: 3.55rem;
  height: 1.04rem;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.name {
  margin-left: 0.2rem;
  font-size: 18px;
  color: #333333;
  line-height: 0.4rem;
}
.phone {
  margin-left: 0.1rem;
}
.ress {
  font-size: 14px;
  color: #666666;
  margin-left: 0.2rem;
  line-height: 0.2rem;
}
.shop {
  width: 3.75rem;
  height: 4.2rem;
  margin-top: 0.1rem;
}
.van-icon {
  position: relative;
  top: 0.04rem;
}
.tit {
  margin-left: 0.1rem;
  background: #ffffff;
}
.s_title {
  font-size: 16px;
  color: #333333;
  margin-left: 0.125rem;
  font-family: PingFangSC-Semibold;
}
.t-tit {
  margin-left: 1.8rem;
}
.q-tit {
  margin-left: 0.1rem;
  color: #ff6040;
}
.van-card {
  margin-top: 0.3rem;
  font-size: 16px;
  color: #333333;
  line-height: 24px;
}
.van-tag {
  margin-top: 0.1rem;
  margin-right: 0.05rem;
}
</style>
